<template>
  <div class="box">
    <h1>欢迎使用</h1>
    <div>
      <img src="/img/Yang/QQ.png" alt="" />
      <img src="/img/Yang/微信.png" alt="" />
      <img src="/img/Yang/微博.png" alt="" />
    </div>
    <h2>使用账号登录</h2>
    <div>
        <input type="text" placeholder="账号" v-model="username">
        <input type="text" placeholder="密码" v-model="password">
    </div>
    <div> 
        <router-link to="/reg">注册账号</router-link>
        
        <router-link to="/forgetpassword">忘记密码</router-link>
    </div>
    <div>
      <input type="button" value="登录" @click="LogIn">
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      password: "",
      username: "",
    };
  },
  computed: {
  },
  methods: {
    ...mapActions("yang",['LOGIN']),
    async LogIn(){
      let param={"username":this.username,"password":this.password}
      //用户名作为请求头里的token放到本地 读取以后在请求头里发送给后端
      sessionStorage.setItem('token',this.username)
      const one = await this.LOGIN({param})
      await this.$toast("登录成功");
      this.$router.push("/Home")
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
  text-align: center;
   &:nth-child(1){
      margin: auto;
      padding-top: 3.5rem;
    } 
  div {
    &:nth-child(2) {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      align-content: space-between;
      justify-content: space-evenly;
      margin-top: 1.5rem;
      margin-bottom: 1.2rem;
      img {
        width: 0.88rem;
        height: 0.88rem;
      }
    }
    &:nth-child(4){
      display: flex;
      height: 3rem;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      input{
          text-indent: .6rem;
      }
    }
    &:nth-child(5){
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 1rem;
    }
  }
  input{
    width: 4.98rem;
    height: .9rem;
    border: 2px solid #999999;
    border-radius: .45rem;
    text-indent: .6rem;
    &:nth-last-child(1){
        text-indent: 0;    
    }
  }
}
</style>